<template>
    <a-layout   style="height: 100%">
        <a-layout-header  style="position:absolute;zIndex: 1;padding:0;width: 100%;height: 44px;">
        <div class="appset-user">
            <div>
                <span  v-if="['customIcon','userCustomIcon','jpaasIcon'].includes(appIcon.type)" >
                    <my-icon :type="appIcon.icon" style="margin-right: 5px;font-size: 18px"/>
                </span>
                <span v-else>
                    <a-icon  :type="appIcon.icon"  style="margin-right: 5px;font-size: 18px"/>
                </span>
                <router-link to='/appMarket'  style="color: white">{{curApp.appName }}</router-link ></div>
            <span style="color:white;"> &nbsp;> &nbsp;{{curFunc.name}}</span>
            <div style="float: right;">
                <div style="margin-top: 10px;cursor: pointer" @click="goBack"><div class="goBackTriangle"></div><span class="goBack-return">
                     {{$ti18('rxForm.return','返回')}}
                </span></div>
            </div>
        </div>
        </a-layout-header>
        <!--中间区域-->
        <a-layout-content  class="index-layout-centers" style="margin-top: 44px;">
        <div class="center">
            <template   v-if="curComponent.isView">
                <component :is='curComponent.cmpt' :ref="curComponent.key" :key="curComponent.cmptKey"
                           :parentClick="go2Function">
                </component>
            </template>
            <template v-else>
                <component :is='curComponent.cmpt' :ref="'ref'+`${curComponent.key}`"
                           :key="curComponent.cmptKey" >
                </component>
            </template>
        </div>
        </a-layout-content>
    </a-layout>
</template>
<script>

import {mapState} from "vuex";
const APP_MAIN_URL = "/appMarket";
const APP_NAV_URL = "application/ApplicationAuthorize";
const APP_NAV_KEY = "ApplicationAuthorize";
const APP_INSTALL_NAV_URL = "modules/system/core/SysAppInstallList";
const APP_INSTALL_NAV_KEY = "ApplicationInstall";


export default {
    name: 'AppMarketLayout',
    computed: {
        ...mapState({
            loading: state => state.appSetting.loading
        })
    },
    data() {
        return {
            curApp: {},
            curComponent:{},
            curFunc:{},
            appIcon: {},
        }
    },
    created() {
        this.init();
        this.SwitchComponents();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "layoutsLang", key);
        },
        //初始化
        init(){
            this.appInit();
            let appIcon = this.$route.query.appIcon;
            if(!appIcon || appIcon==''){
                this.appIcon= {type:"customIcon",icon:"iconyingyong"};
                return ;
            }
            this.appIcon = JSON.parse(appIcon);
        },
        //返回
        goBack(){
            this.$router.push(APP_MAIN_URL);
            /*let key=this.curComponent.key;
            if(key==APP_NAV_KEY){
                this.$router.push(APP_MAIN_URL);
            }else{
               this.curFunc.naviUrl='';
               this.SwitchComponents();
            }*/
        },
        appInit(){
            //初次加载，先从参数中取应用ID
            let appId = this.curApp.appId;
            if(!appId ){
                this.$router.push(APP_MAIN_URL);
            }
        },
        //跳到应用的功能
        go2Function(func){
            if(func){
                this.curFunc=func;
                console.log(func);
                this.SwitchComponents();
            }
        },
        //切换右边的组件
        SwitchComponents() {
            let func = this.curFunc;
            if(func.naviUrl == null || func.naviUrl == ''){
                let appId = this.$route.query.appId;
                func = {naviUrl: appId == 1 ? APP_INSTALL_NAV_URL : APP_NAV_URL, key: APP_NAV_KEY, name: appId == 1 ? this.i18n('appMarketLayout.installation','应用安装列表'): this.i18n('appMarketLayout.authorization','应用授权')};
                this.curFunc = func;
            }
            let compt = require('@/views/' + func.naviUrl)
            let _obj = {
                cmpt: compt.default,
                key: func.key,
                cmptKey: func.key + '1',
                isView:(func.key==APP_NAV_KEY)
            };
            this.curComponent=_obj;
        }
    },
    watch: {

    }
}
</script>
<style scoped>
.goBackTriangle{
    float: left;
    height:12px;
    width: 12px;
    border:12px solid;
    border-color:transparent white transparent  transparent ;
}
.goBack-return{
    width: 50px;
    display: block;
    height: 23px;
    float: left;
    text-align: center;
    line-height: 23px;
    border-radius: 0px 3px 3px 0px;
    background-color: white;
    color: #1890ff;

}
index-layout-centers {
    position: relative;
    overflow: initial;
    margin-left: 10px;
    margin-top: 10px;
}
.index-layout-centers > .center {
    position: absolute;
    top: 44px ;
    bottom: 0;
    width: 100%;
    overflow: auto;
    border-radius: 6px;
}
.appset-user{
    width: 100%;
    line-height: 44px;
    padding: 0px 10px;
    height: 44px;
    background-image: linear-gradient(90deg,
    #2f70ff 0%,
    #2ca8ff 100%),
    linear-gradient(
        #31539b,
        #31539b);
}
.appset-user >div:nth-child(1){
    float: left;
    color: white;
}

.appset-close{
    line-height: 43px;
    margin-left: 10px;
    color: white;
}
</style>